<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的会员等级</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="../js/template-web.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <style>
        .scrolldiv {
            overflow-x: scroll;
            white-space: nowrap;
        }

        /*去除滚动条*/
        ::-webkit-scrollbar {
            display: none;
        }

        .item {
            position: relative;
            width: 100%;
            display: inline-block;
            color: #FFFFFF;
        }

        .cont {
            z-index: 99;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .currlv {
            width: 4em;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            background-color: rgba(51, 51, 51, 0.3);
        }

        .currtitle {
            font-size: 17px;
            padding-left: 112px;
            padding-top: 5px;
        }

        .currgrowth {
            font-size: 14px;
            padding-left: 5px;
            padding-top: 20px;
        }

        .currjindu {
            position: relative;
            width: 150px;
            height: 4px;
            border-radius: 2px;
            background-color: #FFFFFF;
            margin-left: 5px;
            margin-top: 5px;
        }

        .proccess {
            position: absolute;
            height: 4px;
            background-color: #E5A73E;
            width: 66%;
            ;
        }

        .desc {
            font-size: 11px;
            padding-left: 5px;
            margin-top: 5px;
        }

        .imgdiv {
            top: 0;
            left: 0;
            right: 0;
        }

        .levelimg {

            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .rightlist {
            display: flex;
            flex-wrap: wrap;
        }

        .item2 {
            position: relative;
            width: 25%;
        }

        .lock {
            position: absolute;
            top: 0;
            background-color: rgba(0, 0, 0, .3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 84px;
            height: 84px;
        }

        .rightdiv {
            width: 84px;
            height: 84px;
            border-radius: 50%;
        }
    </style>
</head>

<body ontouchstart class="page-bg page-bd-15" style="margin-top:20px;">
    <div style="display:flex;align-items:center;">
        <div class="weui-avatar-circle">
            <img id="imgurl" src="../images/me_avatar.png""> 
        </div>
        <div style=" margin-left:20px;" class="page-hd-desc" id="levelname">LV0普通会员
        </div>
    </div>
    <div class="scrolldiv" id="div1">

    </div>
    <div class="weui-panel__hd">当前已获收益</div>
    <div class="rightlist" id="div2">

    </div>
</body>

</html>
<script type="text/template" id="temp1">
    {{each list}}
    <div class='item'>
        <div class="cont">
            {{if($value.Lock==1)}}
            <div class="currlv">当前等级</div>
            {{else}}
            <div class="currlv">未解锁</div>
            {{/if}}
            <div class="currtitle">{{$value.LevelName}}</div>
            {{if($value.Lock==1)}}
            <div class="currgrowth"><span style="color: #E5A73E;">{{baseinfo.GrowthValue}}</span>/<span>{{$value.EndGrowth}}</span><span
                    style="padding-left:10px" class="growthclass">成长值</span><span class="growthclass" style="padding-left:10px">></span></div>
            {{else}}
            <div class="currgrowth"><span
                style="padding-left:10px" class="growthclass">成长值详情</span><span class="growthclass" style="padding-left:10px">></span></div>
            {{/if}}
            {{if($value.Lock==1)}}
             <div class="currjindu">
                <div class="proccess" style="width:{{baseinfo.GrowthValue/$value.EndGrowth*100 +'%'}}"></div>
            </div>
            {{/if}}
            {{if($value.Lock==1)}}
            <div class="desc">本月还需{{$value.EndGrowth-baseinfo.GrowthValue}}成长值，可升级</div>
            {{else}}
            <div class="desc">未解锁，需要{{$value.StartGrowth}}成长值</div>
            {{/if}}
        </div>
        <div class="imgdiv">
            <img class="levelimg"
                src="{{$value.Logo}}" />
        </div>
    </div>
    {{/each}}
</script>

<script type="text/template" id="temp2">
    {{each list item}}
    <div class="item2 rightitem" data-index={{$index}}>
        <img class="rightdiv" src="{{item.ImgUrl}}" />
        <div class="page-hd-desc">{{item.RightName}}</div>
        {{if(item.Lock==1)}}
        <div class="lock">
            <img src="../images/lock.png"></image>
        </div>
        {{/if}}
    </div>
    {{/each}}
</script>
<script>
    $.fn.scrollL = function (options) {
        var defaults = {
            toLeft: 0,    //滚动目标位置
            durTime: 500,  //过渡动画时间
            delay: 30,     //定时器时间
            callback: null   //回调函数
        };
        var opts = $.extend(defaults, options),
            timer = null,
            _this = this,
            curLeft = _this.scrollLeft(),//滚动条当前的位置
            subTop = opts.toLeft - curLeft,    //滚动条目标位置和当前位置的差值
            index = 0,
            dur = Math.round(opts.durTime / opts.delay),
            smoothScroll = function (t) {
                index++;
                var per = Math.round(subTop / dur);
                if (index >= dur) {
                    _this.scrollLeft(t);
                    window.clearInterval(timer);
                    if (opts.callback && typeof opts.callback == 'function') {
                        opts.callback();
                    }
                    return;
                } else {
                    _this.scrollLeft(curLeft + index * per);
                }
            };
        timer = window.setInterval(function () {
            smoothScroll(opts.toLeft);
        }, opts.delay);
        return _this;
    };

    lobsterh5.main({
        data: {
            seleIndex: 0,
            jindu: 0,
            baseinfo: {},
            memberlevelList: [],
            rightList: [],
            memberrightList: [],
            currlvName: '',
        },
        //初始化页面
        pageload: function () {
            this.initevent();
            this.getLevelRight();
        },

        //初始化事件
        initevent: function () {
            var self = this;
            $("#div1").on("click", ".growthclass", function () {
                self.togrowth();
            })
            $("#div2").on("click", ".rightitem", function () {
                self.toright($(this).data("index"));
            })
        },
        getLevelRight: function () {
            var self = this;
            lobsterh5.GET("/lowcode/APP20210728143245471/member/?fun=member.getLevelRight", {
                userId: localStorage.getItem("userId")
            }).then(res => {
                self.data.baseinfo = res.baseinfo;
                self.data.memberlevelList = res.memberlevelList;
                self.data.rightList = res.rightList;
                self.data.memberrightList = res.memberrightList;
                self.data.memberlevelList[self.data.baseinfo.Level].Lock = 1;
                self.data.currlvName = self.data.memberlevelList[self.data.baseinfo.Level].LevelName;
                self.setright();
                if (self.data.baseinfo.ImgUrl)
                    $("#imgurl").attr("src", self.data.baseinfo.ImgUrl);
                $("#levelname").text("LV" + self.data.baseinfo.Level + self.data.currlvName);
                var html = template("temp1", { list: self.data.memberlevelList, baseinfo: self.data.baseinfo });
                $("#div1").html(html);
                var html = template("temp2", { list: self.data.rightList });
                $("#div2").html(html);

                self.settablocation();

            }).catch(res => {
                $.toast(res.msg, 'forbidden');
            });
        },
        setright() {
            var levelId = this.data.memberlevelList[this.data.baseinfo.Level].MemberLevelId;

            this.data.rightList.forEach(a => {
                var filter = this.data.memberrightList.filter(b => {
                    return b.MemberLevelId == levelId && b.RightId == a.RightId;
                })
                if (filter.length == 0)
                    a.Lock = 1;
                else
                    a.Lock = 0;
            })
        },
        settablocation() {
            var self = this
            var left = $(".item:eq(" + self.data.baseinfo.Level + ")").offset().left;
            $("#div1").scrollL({ toLeft: left - 10, durTime: 300 });
        },
        togrowth() {
            location.href = "../growth/record.html";
        },
        toright(index) {
            location.href = "right.html?level=" + this.data.baseinfo.Level + "&seleIndex=" + index;
            // this.$util.navigateTo('/pages/member/level/right?level=' + this.baseinfo.Level + '&seleIndex=' + index)
        }
    });

</script>